<template>
  <div id="home">
    <div class="header">
        <a href="#" class="location">
          <span>欣才IT学院</span>
          <i class="fa fa-caret-down"></i>
        </a>
        <div class="iconWrap">
          <a href="#" class="msg"></a>
          <a href="#" class="search"></a>
        </div>
    </div>
    <article class='container'>
      <div class="top">
        <div class="searchBar">
          <span>北吃饺子南汤圆</span>
        </div>
        <div class="hotWords">
            <a class="words" v-for="val in top" :key="val.id">{{val.text}}</a>
        </div>
      </div>
      <div class="top2"></div>
      <div class="topImg">
          <img :src="imgUrl+'/upload/home/top.jpg'">
      </div>
      <div class="topNav">
        <div class="topNavWrap">
          <div class="topNavImg">
            <div class="topNavImgs" v-for="val in topnavs" :key="val.id">
              <a href="#">
                <img :src="imgUrl+val.icon">
                <span>{{val.text}}</span>
                <span class="redSpan" v-if="val.tip">{{val.tip}}</span>
              </a>
            </div>
          </div>
        </div>
      </div>
      <div class="allBorder"></div>
      <div id="scrollWrap">
        <ul id="scrollWrapUl">
          <li v-for="(val,index) in imgArry" :key="index">
            <a href="#">
              <img :src="val">
            </a>
          </li>
        </ul>
        <ul id="numUl">
          <li v-for="(val,index) in imgArry" :class="index==mark?'active':''" :key="index"></li>
        </ul>
      </div>
      <div class="allBorder"></div>
      <div class="allbuy">
          <div class="buyImg" v-for="val in buyImgArry" :key="val.id">
            <img :src="imgUrl+val.arry">
          </div>
      </div>
      <div class="halfBorder"></div>
      <div class="moneyOff">
        <div class="offWrap">
          <div class="offImg" v-for="val in offImgArry" :key="val.id">
            <h3>{{val.text1}}</h3>
            <span>{{val.text2}}</span>
            <img :src="imgUrl+val.arry">
          </div>
        </div>
      </div>
      <div class="allBorder"></div>
      <div class="seckill">
        <div class="seckillTop">
          <div class="seckillMore">更多</div>
        </div>
        <div class="seckillBody">
          <div class="sBodyWrap" v-for="val in sBodyArry" :key="val.id">
            <p class="seckillImg">
              <img :src="imgUrl+val.arry">
              <span>沃尔玛-秦淮店</span>
            </p>
            <p class="newPrice">
              ￥<span>{{val.newPrice}}</span>
            </p>
            <p class="oldPrice">
              ￥<span>{{val.oldPrice}}</span>
            </p>
          </div>
        </div>
        <div class="scrollMask"></div>
      </div>
      <div class="halfBorder"></div>
      <div id="scrollWrap2">
        <ul id="scrollWrapUl2" @touchstart='getTar($event)' @touchmove='getMove($event)' @touchend='getEnd($event)'>
          <li v-for="(val,index) in imgArry2" :key="index">
            <a>
              <img :src="val">
            </a>
          </li>
        </ul>
        <ul id="numUl2">
          <li v-for="(val,index) in imgArry2" :class="index==mark2?'active':''" :key="index"></li>
        </ul>
      </div>
      <div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
        <div class="store">
          <div class="storeTitle">附近的店铺</div>
          <div class="storeBody">
            <div class="shopsWrap" v-for="(val,index) in shopArry" :key="index">
              <div class="shops">
                <router-link :to='"/details/"+val.id' class="shopImg">
                  <img :src="imgUrl+val.arry">
                  <i class="goodsNum" v-if="cars[val.id]!==undefined">{{cars[val.id].carNum}}</i>
                </router-link>
                <div class="shopTxt">
                  <router-link :to='"/details"+val.id' class="shopName">
                    <div class="shopNameTitle">
                      <h2>{{val.shopNameTitle1}}{{val.shopNameTitle2}}</h2>
                      <div class="honor"></div>
                    </div>
                    <div class="shopNameStar">
                      <p class="stars">
                        <span>
                          <i v-for="(val,index) in val.starNum" :key="index"></i>
                        </span>
                        <span class="score">{{val.score}}</span>
                      </p>
                      <p class="sales">月售{{val.sales}}千+</p>
                      <p class="distance">
                        <span>{{val.time}}分钟</span>
                        <span>{{val.distance}}km</span>
                      </p>
                    </div>
                    <div class="shopNameFreight">
                      <span class="startSend">起送￥{{val.startSend}}<var class="shu"></var>基础运费￥4</span>
                      <span class="dada">
                        <span>达达专送</span>
                      </span>
                    </div>
                  </router-link>
                  <div class="shopSale">
                    <div class="shopSaleTickets">
                      <div :class="['tickets',index+1+'']" v-for="(tick,index) in val.tickets" :key="tick.id" v-show="index<=1">
                        <span :class="['tic',tick.tic.tClass]">
                          <span>{{tick.tic.txt}}</span>
                        </span>
                        <span :class="tick.tic.tClass2">{{tick.tic.con1}}{{tick.tic.reach}}{{tick.tic.con2}}{{tick.tic.rid}}{{tick.tic.con3}}</span>
                      </div>
                    </div>
                    <div class="moreTic" @click="more($event)" v-if="val.ticNum<=2?false:true">
                      <i class="arrow"></i>
                    </div>
                    <div class="another" v-if="val.shopLength">
                      <div class="anCon">
                        <i class="house"></i><span>附近还有{{val.shopLength}}家</span>
                        <div class="moreTic" @click="more2($event)">
                          <i class="arrow"></i>
                        </div>
                        <ul class="ulShow">
                          <li v-for="shopName in val.anotherShop" :key="shopName.id">
                            {{val.shopNameTitle1}}{{shopName.name}}
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </article>
    <footer>
      <div class="footImg" v-for="val in footImgArry" :key="val.id">
        <img :src="imgUrl+val.url">
      </div>
      <div class="newPerson"></div>
    </footer>
      <AppFooter active='homeTab'></AppFooter>
  </div>
</template>

<script>
import $ from 'jquery'
import infiniteScroll from 'vue-infinite-scroll'
export default {
    directives: {infiniteScroll},
    data(){
        return {
          busy:false,
          topnavs:[],
          top:[],
          imgArry:[
            '/static/home/0c37384eaa933d5e.png',
            '/static/home/2fa5448c34e5129e.png',
            '/static/home/4b716031afdd3856.png',
            '/static/home/59beb97287fea343.png',
            '/static/home/7896ebbc03be183d.png',
            '/static/home/7130505a3e757d17.png',
            '/static/home/b0e50672a25a78d2.png',
            '/static/home/be0026dc5cacadaa.png',
          ],
          buyImgArry:[],
          offImgArry:[],
          sBodyArry:[],
          imgArry2:[
            '/static/home/c8f3296ad14dac32.png',
            '/static/home/c324272d4f754eee.png',
            '/static/home/e155445f2a193a69.jpg',
          ],
          shopArry:[],
          footImgArry:[],
          show:false,
          mark:0,
          mark2:0,
          i:1,
          startX:0,
          disX:0,
          dir:'',
          bannerLeft:0,
          left:0,
          nameShow:false,
          index:0,
          timer:null
        }
    },
    created(){
       $(window).scroll(function(){
        var v=($(this).scrollTop())/250;
        var mr=($(this).scrollTop());
        $('.header').css('backgroundColor','rgba(78,203,86,'+v+')');
        $('.top').css('backgroundColor','rgba(78,203,86,'+(1-v)+')');
        if(mr<=95){
            $('.iconWrap').css('right',(mr-95)+'px');
        }else{
          $('.iconWrap').css('right',0+'px');
        }
      })
      setInterval(()=>{
        this.mark++;
        if(this.mark===7){
          this.mark=0;
        }
      },4000)
      this.getTopNavs();
      this.getTop();
      this.getBuyImgArry();
      this.getOffImgArry();
      this.getsBodyArry();
      this.loadMore();
      this.getfootImgArry();
    },
    mounted(){
      this.carousel();
      this.carousel1();
    },
    destroyed(){
      clearTimeout(this.timer)
      this.timer=null;
    },
    methods:{
       carousel(){
         var self=this;
          var firstimg=$('#scrollWrapUl li').first().clone(); //复制第一张图片
          $('#scrollWrapUl').append(firstimg).width($('#scrollWrapUl li').length*($('#scrollWrapUl li img').width()));
          //将第一张图片放到最后一张图片后，设置ul的宽度为图片张数*图片宽度
          //定时器自动播放
          this.timer=setInterval(()=>{
            self.index++;
            if (self.index==$('#scrollWrapUl li').length) {
              self.index=1;
              $('#scrollWrapUl').css({left:0});
            };
            $('#scrollWrapUl').stop().animate({left:-self.index*$('#scrollWrapUl li img').width()},300);
            if (self.index==$('#scrollWrapUl li').length-1) { 
              $('#numUl li').eq(0).addClass('active').siblings().removeClass('active');
            }else{
              $('#numUl li').eq(self.index).addClass('active').siblings().removeClass('active');
            }
          },4000)
      },
      carousel1(){
        var firstimg=$('#scrollWrapUl2 li').first().clone(); //复制第一张图片
        var lastimg=$('#scrollWrapUl2 li').last().clone(); //复制最后一张图片 
        $('#scrollWrapUl2').append(firstimg).prepend(lastimg).width($('#scrollWrapUl2 li').length*($('#scrollWrapUl2 li img').width())); 
        //将第一张图片放到最后一张图片后，设置ul的宽度为图片张数*图片宽度
        this.bannerLeft=-$('#scrollWrapUl2 li img').width();
        $('#scrollWrapUl2').css('transform','translateX('+this.bannerLeft+'px)');
      },
      more(e){
        this.show=!this.show;
        if(!this.show==false){
         if($(e.target).hasClass('arrow')){
            $(e.target).css({
            transform:'rotate(180deg)',
          })
         }else{
            $(e.target).find('i').css({
            transform:'rotate(180deg)',
          })
         }
          let tics=e.target.parentNode.parentNode.getElementsByClassName('tickets');
          tics=$(tics).filter((index,val)=>{
            return !$(val).hasClass('notTicShow');
          })
          $.each(tics,(index,val)=>{
            if(index>1){
              $(val).css('display','')
            }
          })
        }else{
          if($(e.target).hasClass('arrow')){
            $(e.target).css({
            transform:'rotate(0deg)',
          })
         }else{
            $(e.target).find('i').css({
            transform:'rotate(0deg)',
          })
         }
          let tics=e.target.parentNode.parentNode.getElementsByClassName('tickets');
          tics=$(tics).filter((index,val)=>{
            return !$(val).hasClass('notTicShow');
          })
          $.each(tics,(index,val)=>{
            if(index>1){
              $(val).css('display','none')
            }
          })
        }
        
      },
      more2(e){
       this.nameShow=!this.nameShow;
        if(!this.nameShow==false){
         if($(e.target).hasClass('arrow')){
            $(e.target).css({
            transform:'rotate(180deg)',
          })
         }else{
            $(e.target).find('i').css({
            transform:'rotate(180deg)',
          })
         }
          $(e.target.parentNode.getElementsByTagName('ul')[0]).removeClass('ulShow');
        }else{
          if($(e.target).hasClass('arrow')){
            $(e.target).css({
            transform:'rotate(0deg)',
          })
         }else{
            $(e.target).find('i').css({
            transform:'rotate(0deg)',
          })
         }
         $(e.target.parentNode.getElementsByTagName('ul')[0]).addClass('ulShow');
        }
      },
      getTar(e){
        var ul=document.getElementById('scrollWrapUl2');
        e.preventDefault()
            ul.style.transition = '';       //先清除ul上的transition
            this.startX = e.targetTouches[0].clientX;
            this.dir = '';       //每开始touch一次先清除滑动方向
            //如果当前touch的是第一个li，则将ul平移到倒数第二个li的位置            
            if(e.target.parentNode.parentNode == ul.firstElementChild){
                this.i = ul.children.length-2;
                this.bannerLeft = -$('#scrollWrapUl2 li img').width() * this.i;
                ul.style.transform = 'translateX('+this.bannerLeft+'px)';
            //如果当前touch的是最后一个li，则将ul平移到第二个li的位置
            }else if(e.target.parentNode.parentNode == ul.lastElementChild){
                this.i = 1;
                this.bannerLeft = -$('#scrollWrapUl2 li img').width() * this.i;
                ul.style.transform = 'translateX('+this.bannerLeft+'px)';
            }
            this.disX = this.startX - this.bannerLeft;
      },
      getMove(e){
        var ul=document.getElementById('scrollWrapUl2');
        e.preventDefault()
                        this.bannerLeft = e.targetTouches[0].clientX - this.disX;
                        ul.style.transform = 'translateX('+this.bannerLeft+'px)';
      },
      getEnd(e){
        var ul=document.getElementById('scrollWrapUl2');
        this.i = Math.round(-this.bannerLeft/$('#scrollWrapUl2 li img').width());
        this.bannerLeft = -$('#scrollWrapUl2 li img').width() *this.i;
        ul.style.transition = '0.3s';       //回弹时加上过度效果
        ul.style.transform = 'translateX('+this.bannerLeft+'px)';
        this.mark2=this.i-1==3?0:this.i-1;
        if(this.mark2==-1){
          this.mark2=2;
        }
      },
      getTopNavs(){
        this.axios.get('/topnavs').then((ret)=>{
          let {data,error}=ret.data;
          this.topnavs=data;
        }).catch(()=>{})
      },
      getTop(){
        this.axios.get('/top').then((ret)=>{
          let {data,error}=ret.data;
          this.top=data;
        }).catch(()=>{})
      },
      getBuyImgArry(){
        this.axios.get('/buyimgarry').then((ret)=>{
          let {data,error}=ret.data;
          this.buyImgArry=data;
        }).catch(()=>{})
      },
      getOffImgArry(){
        this.axios.get('/offimgarry').then((ret)=>{
          let {data,error}=ret.data;
          this.offImgArry=data;
        }).catch(()=>{})
      },
      getsBodyArry(){
        this.axios.get('/sbodyarry').then((ret)=>{
          let {data,error}=ret.data;
          this.sBodyArry=data;
        }).catch(()=>{})
      },
      getShop(){
        this.busy=true;
        this.axios.get('/shop').then((ret)=>{
          let {data,error}=ret.data;
          this.shopArry=this.shopArry.concat(data);
          this.busy=false;
        }).catch(()=>{})
      },
      loadMore(){
        this.getShop();
      },
      getfootImgArry(){
        this.axios.get('/footimg').then((ret)=>{
          let {data,error}=ret.data;
          this.footImgArry=data;
        }).catch(()=>{})
      },
    },
}
</script>

<style scoped lang='scss'>
#home{
  .header{
    width:750px;
    height:103px;
    background-color:rgba(78,203,86,0);
    position:fixed;
    top: 0;
    line-height: 103px;
    z-index: 100;
    .location{
      text-decoration: none;
      max-width: 40%;
      height:103px;
      display: inline-block;
      border-radius: 53px;
      line-height:103px;
      font-size: 37px;
      color:white;
      text-align: left;
      margin-right: 105px;
      position: absolute;
      left: 0;
      display:flex;
      span{
        display:block;
        background: url(/static/home/index_icon_locate.png) no-repeat 0px 32px;
        background-size: 32px;
        padding-left: 46px;
        margin-left: 30px;
        margin-right: 4px;
        text-align: left;
      }
      i{
        line-height: 103px;
        padding-left: 5px;
        font-size: 28px;
      }
    }
    .iconWrap{
      position: absolute;
      display: flex;
      width:183px;
      right: -105px;
      transition: all 0.5s;
      .msg{
        display: inline-block;
        width: 46px;
        height:103px;
        background: url(/static/home/index_icon_message.png) no-repeat center;
        background-size: 46px;  
        padding:0 11px;
      }
      .search{
        display: inline-block;
        width: 93px;
        height:79px;
        background-size: 46px;
        padding:0 11px;
        background: url(/static/home/bmenu.png) no-repeat center;
        background-position: center 0px;
        background-size: 50px;
      }
    }
  }
  .container{
    .top2{
      width:750px;
      height:257px;
    }
    .top{
      width:750px;
      height:257px;
      background-color:rgba(78,203,86,1);
      position: absolute;
      top: 0;
      .searchBar{
        height:79px;
        line-height: 85px;
        width: 95%;
        background-color: #fff;
        margin: 114px auto 0px auto;
        text-align: center;
        border-radius: 159px;
        span{
          color:#999;
          font-size: 32px;
          background: url(/static/home/index_icon_sea.png) no-repeat left 7px;
          padding-left: 46px;
          line-height: 32px;
          background-size: 35px;
        }
      }
      .hotWords{
        width: 95%;
        margin: 0 auto;
        height: 63px;
        line-height: 63px;
        text-align: center;
        .words{
          display: inline-block;
          font-size: 28px;
          text-decoration: none;
          color:#fff;
          padding: 0 16px;
        }
      }
    }
    .topImg{
      width: 750px;
        img{
          width: 100%;
          height: 100%;
        }
    }
    .topNav{
      width: 750px;
      height: 398px;
      .topNavWrap{
        width: 750px;
        padding-bottom:35px;
        .topNavImg{
          display: flex;
          flex-wrap: wrap;
          justify-content: space-around;
          .topNavImgs{
            margin-top: 35px;
            text-align: center;
            position: relative;
            a{
              display: block;
              width: 150px;
              height:145px;
              text-decoration: none;
              color: #000000;
              font-size:28px;
              img{
                width: 93px;
                height: 93px;
                margin: 0 28px 23px;
              }
              .redSpan{
                display:block;
                height:30px;
                line-height: 28px;
                background-color: #FF5757;
                border: 5px solid #ff5757;
                border-radius: 70px;
                color:#fff;
                position: absolute;
                top: 0;
                right: 14%;
              }
            }
          }
        }
      } 
    }
    .allBorder{
      height: 23px;
      background-color: #fff;
    }
    .halfBorder{
      height: 11.5px;
      background-color: #fff;
    }
    #scrollWrap{
      margin: 0 23px 0 23px;
      background: #fff;
      height:187px;
      overflow:hidden;
      position:relative;
      #numUl{
        margin: 0;
        padding: 0;
        position:absolute;
        bottom:20px;
        width:100%;
        text-align:center;
        li{
          display:inline-block;
          margin: 0;
          padding: 0;
          width:4px;
          height:4px;
          background:#ededed;
          border-radius:50%;
          border:4px solid #ededed;
          margin:6px 6px;
        }
        .active{
            background-color:#39ac69;
            border-color: #39ac69;
            width: 7px;
          }
      }
      #scrollWrapUl{
        margin: 0;
        padding: 0;
        height:187px;
        position:absolute;
        top:0;
        left:0;
        li{
          margin: 0;
          padding: 0;
          width:704px;
          height:187px;
          float:left;
          list-style-type:none;
          img{
            width:100%;
            height:100%;
          }
        }
        // li end
      }
      // scrollWrapUl end
    }
    .allbuy{
      // width: 750px;
      padding:0 23px 0 23px;
      // margin: 0 23px 0 23px;
      // position: relative;
      // box-sizing: border-box;
      background: #fff;
      // height: 260px;
      display: flex;
      justify-content: space-around;
      .buyImg{
        width: 344px;
        height: 260px;
        img{
          width: 100%;
          height: 100%;
        }
      }
    }
    .moneyOff{
      // width: 750px;
      padding:0 23px 0 23px;
      background: #fff;
      .offWrap{
        display: flex;
        justify-content: space-between;
        .offImg{
          width: 24%;
          background-color:#FBFBFB;
          height:288px;
          padding-bottom: 14px;
          text-align: center;
          h3{
            margin-top: 30px;
            margin-bottom: 0;
            color: #333;
            font-size: 33px;
            font-weight: 500;
          }
          span{
            margin-top: 17px;
            font-size: 28px;
            display: block;
            height: 28px;
            line-height: 28px;
            color: #FF5757;
          }
          img{
            width: 140px;
            height: 140px;
            margin-top: 23px;
          }
        }
      }
    }
    .seckill{
      position: relative;
        .seckillTop{
          height: 70px;
          line-height:70px;
          padding: 11px 23px;
          background: url(/static/home/seckill-title.png) 23px center no-repeat;
          background-size: auto 46px;
          .seckillMore{
            float: right;
            color: #ff5757;
            font-size:28px;
            background: url(/static/home/seckill-right.png) center right no-repeat;
            background-size: auto 28px;
            padding-right:23px;
          }
        }
        .seckillBody{
          margin-top: 11px;
          padding-bottom: 11px;
          width: auto;
          padding-right: 23px;
          overflow: scroll;
          display: flex;
          .sBodyWrap{
            width:20%;
            font-size:28px;
            text-align: center;
            margin: 0 0 0 23px;
            overflow: hidden;
            flex-shrink:0;
            p{
              margin:0;
              padding:0;
            }
            .seckillImg{
              width: 145px;
              height: 145px;
              position: relative;
              white-space: nowrap;
              text-overflow: ellipsis;
              img{
                width: 100%;
                height: 100%;
              }
              span{
                position: absolute;
                z-index: 10;
                height: 25px;
                line-height:25px;
                font-size: 20px;
                color:#fff;
                left: 0;
                right: 0;
                bottom: 0;
                background: rgba(255,87,87,0.6);
                padding: 2px 7px;
                border-radius: 23px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }
            }
            .newPrice{
              color: #ff5757;
              line-height: 50px;
              span{
                font-size: 37px;
                font-weight: bold;
              }
            }
            .oldPrice{
              color: #999;
              span{
                text-decoration: line-through;
              }
            }
          }
        }
        .scrollMask{
          position: absolute;
          width: 750px;
          height: 15px;
          background-color: #fff;
          bottom: 0px;
          left: 0;
          z-index: 30;
        }
    }
    #scrollWrap2{
      margin: 0 23px 0 23px;
      background: #fff;
      height:187px;
      overflow:hidden;
      position:relative;
      #numUl2{
        margin: 0;
        padding: 0;
        position:absolute;
        bottom:20px;
        width:100%;
        text-align:center;
        li{
          display:inline-block;
          margin: 0;
          padding: 0;
          width:4px;
          height:4px;
          background:#ededed;
          border-radius:50%;
          border:4px solid #ededed;
          margin:6px 6px;
        }
        .active{
            background-color:#39ac69;
            border-color: #39ac69;
            width: 7px;
          }
      }
      #scrollWrapUl2{
        margin: 0;
        padding: 0;
        height:187px;
        position:absolute;
        top:0;
        left:0;
        li{
          margin: 0;
          padding: 0;
          width:704px;
          height:187px;
          float:left;
          list-style-type:none;
          img{
            width:100%;
            height:100%;
          }
        }
        // li end
      }
      // scrollWrapUl end
    }
    .store{
      .storeTitle{
        padding: 75px 0 23px 23px;
        color:#333;
        font-size:47px;
        font-weight: bold;
      }
      .storeBody{
        .shopsWrap{
          padding: 44px 20px;
          position: relative;
          .shops{
            display: flex;
            &::after{
              height: 1px;
              content: '';
              border-top: 1px solid #e8e8e8;
              position: absolute;
              bottom: 0;
              right: 0;
              left: 196px;
            }
            .shopImg{
              display: block;
              text-decoration: none;
              width:140px;
              height: 140px;
              border-radius: 9px;
              border:2px solid rgba(0,0,0,0.08);
              margin-right: 18px;
              position: relative;
              img{
                width: 100%;
                height: 100%;
              }
              .goodsNum{
                position: absolute;
                font-size: 23px;
                background-color:#FF5757;
                color:#fff;
                top: -14px;
                right: 0;
                min-width: 35px;
                height: 35px;
                border-radius: 35px;
                line-height: 35px;
                text-align: center;
              }
            }
            .shopTxt{
              margin-left: 10px;
              position: relative;
              .shopName{
                display: block;
                text-decoration: none;
                .shu{
                  width: 2px;
                  height: 18px;
                  background-color: #f5f5f5;
                  margin: 0 11px;
                  display: inline-block;
                }
                .shopNameTitle{
                  height: 46px;
                  line-height: 46px;
                  display: flex;
                  h2{
                    width: 480px;
                    font-size: 37px;
                    color:#333;
                    font-weight: bold;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    margin: 0;
                  }
                  .honor{
                    background: url(/static/home/5bee3729N8630ddda.png) center center no-repeat;
                    width: 42px;
                    height: 46px;
                    background-size:37px auto ;
                  }
                }
                .shopNameStar{
                  display: flex;
                  margin-top: 11px;
                  justify-content: space-between;
                  p{
                    margin: 0;
                  }
                  .stars{
                    display: inline-block;
                    height: 28px;
                    display: flex;
                    span{
                      display:block;
                      display: flex;
                      i{
                        display:block;
                        width: 23px;
                        height:23px;
                        background:url(/static/home/newStar.png) no-repeat;
                        background-size: auto 23px;
                        margin-top: 4px;
                        background-position: 0 0;
                      }
                      .s4{
                        background-position: -23px 0;
                      }
                    }
                    .score{
                      display: block;
                      padding-left: 7px;
                      line-height: 23px;
                      font-size: 23px;
                      color:#FFA14E;
                      padding-top: 5px;
                    }
                  }
                  .sales{
                    padding-left: 7px;
                    font-size: 28px;
                    line-height: 28px;
                    color:#333;
                  }
                  .distance{
                    display: block;
                    text-align: right;
                    span{
                      display: inline-block;
                      font-size: 25px;
                      color: #666;
                      margin-left: 20px;
                    }
                  }
                }
                .shopNameFreight{
                  margin-top: 14px;
                  height: 37px;
                  line-height: 37px;
                  .startSend{
                    font-size: 25px;
                    color:#666;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    line-height: 37px;
                    display: block;
                    float: left;
                  }
                  .dada{
                    border:3px solid #16a9ff;
                    color: #16a9ff;
                    line-height: 25px;
                    display:block;
                    padding: 0 7px;
                    font-size: 23px;
                    height: 27px;
                    border-radius: 9px 2px;
                    float: right;
                    span{
                      display: inline-block;
                      height: 23px;
                      line-height: 23px;
                    }
                  }
                }
              }
              .shopSale{
                position: relative;
                .shopSaleTickets{
                  width: 90%;
                  .tickets{
                    display: none;
                    margin-top: 11px;
                    font-size: 25px;
                    color: #666;
                    line-height: 32px;
                    display: flex;
                    flex: 1;
                    .tic{
                      color: #fff;
                      margin-right: 7px;
                      display: block;
                      padding: 0 7px;
                      height: 32px;
                      line-height: 32px;
                      border-radius: 9px 2px;
                      margin-top: 5px;
                    }
                    .redTic{
                      background-color: #FF7D7D;
                    }
                    .greenTic{
                      background-color:#55D85E;
                    }
                    .blueTic{
                      background-color:#4C9CFF;
                    }
                    .yellowTic{
                      background:-webkit-linear-gradient(left top,#FFC837,#FF9633);
                    }
                    .hadtic{
                      min-width: 46px;
                      text-align: center;
                      border-top-right-radius:0 !important;
                      border-bottom-right-radius:0 !important;
                      margin-right:0 !important;
                      margin-top:0 !important;
                    }
                    .ticketsTxt{
                      display: block;
                      width:379px;
                      text-overflow:ellipsis;
                      white-space: nowrap;
                      overflow: hidden;
                      font-size: 25px;
                      margin-top: 5px;
                    }
                    .hadTicketsTxt{
                      height: 32px;
                      display: block;
                      max-width: 85%;
                      background-color: rgba(255, 87, 87, 0.1);
                      color:#FF5D4B;
                      padding: 0 11px;
                      overflow: hidden;
                      white-space: nowrap;
                      text-overflow: ellipsis;
                      line-height: 32px;
                      border-top-right-radius: 3px;
                      border-bottom-right-radius: 9px;
                      border-color: #FF5757;
                      font-size: 23px;
                    }
                  }
                }
                .moreTic{
                  height: 86px;
                  line-height: 86px;
                  top: -20px;
                  position: absolute;
                  width: 14%;
                  right: -23px;
                  font-size: 23px;
                  text-align: right;
                  padding-right: 23px;
                  i{
                    display: inline-block;
                    background:url(/static/home/icon_arrow_down.png) no-repeat;
                    background-size: 16px 9px;
                    width: 16px;
                    height: 23px;
                    background-position: 50% 50%;
                    transition: all 0.2s;
                  }
                }
                .another{
                  position: relative;
                  margin-top: 46px;
                  .anCon{
                    font-size: 25px;
                    color:#666;
                    line-height: 32px;
                    position: relative;
                    .ulShow{
                      display: none;
                    }
                    .house{
                      float: left;
                      width: 32px;
                      height: 32px;
                      margin-right: 9px;
                      background: url(/static/home/index_moreStore.png) center center no-repeat;
                      background-size: 25px auto;
                    }
                    ul{
                      padding: 0;
                      margin: 0;
                      li:first-child{
                        border-top: 0;
                      }
                      li{
                        padding: 0;
                        margin: 0;
                        list-style: none;
                        font-size: 32px;
                        color:#333;
                        border-top: 3px solid #f5f5f5;
                        height: 87px;
                        line-height: 87px;
                        margin-left: 40px;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  footer{
    .footImg{
      position: fixed;
      bottom:20%;
      right:10px;
      width: 175px;
      height: auto;
      z-index: 100;
      img{
        width:100%;
        height: auto;
      }
    }
    .newPerson{
      height: 191px;
      width: 750px;
      background: url(/static/home/download_2018_0408.png) bottom center no-repeat;
      background-size: 100%;
      position: fixed;
      bottom: 117px;
      left: 0;
      right: 0;
      z-index: 100;
    }
  }
}
</style>
